<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Login</title>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/buttons.css">
    <!--<link rel="stylesheet" href="{{ static_url('css/bootstrap.min.css')}}">-->
    <style>
        .body{
            margin-top: 50px;
            padding-bottom: 70px;
        }
    </style>
</head>
<body>
    <!--导航栏-->
    <!--使用navbar-fixed-top固定到顶部-->
    <nav class="nav navbar-default navbar-fixed-top" role="navigation">
        <!--使用流布局-->
        <div class="container">
            <!--指定logo位置及图片-->
            <div class="navbar-header">
                <a href="/index" class="navbar-brand">{{get_title_data('title')}}</a>
            </div>
            <div class="collapse navbar-collapse" id="menu">
                <!--菜单栏-->
                <!--使用位置来指定放在那里-->
                <ul class="nav navbar-nav navbar-left">
					<li><a>{{get_title_data('site')}}</a></li>
				</ul>
                <ul class="nav navbar-nav navbar-right">
                    <!--超链接-->
                    <li><a href="/about" class="navbar-link">关于</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!--添加一个container 做body-->
	<div class="container body">
        {% raw xsrf_form_html() %}
        <!--标题栏-->
        <h1 class="page-header">登录管理</h1>
        <!--表单-->
        <form class="form-horizontal form-data">
            <!--错误提示行-->
            <div class="form-group">
                <label for="error-msg" class="col-sm-2 control-label sr-only"></label>
                <div id="error-msg" class="alert alert-danger col-md-3 error-msg hide" role="alert"></div>
            </div>
            <!--用户名-->
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-md-3">
                    <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <!--密码-->
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-md-3">
                    <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <!--点击按钮-->
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label sr-only"></label>
                <div class="col-md-3">
                    <button type="button" class="button button-glow button-rounded button-small button-primary btn-login" onclick="SubmitLogin(this);">
                        <div>&nbsp登录&nbsp</div>
                        <span class="hide">
                            <img src="/static/img/loading-0.gif">
                            <span>正在登录</span>
                        </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-md-12 text-center panel-footer navbar-fixed-bottom">
            <!-- 底部固定区域 -->
            {{ footer_info() }}
        </div>
	</div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <script>
        /* Ajax 请求操作*/
        $(function () {
            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader('X-CSRFtoken', $.cookie('_xsrf'));
                }
            });
        });
        /* 检测回车键 */
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $(".btn-login").click();
            }
        });

        /* 登录提交*/
        function SubmitLogin(ths){
//            清空错误提示
            $('#error-msg').empty().addClass('hide');
//            添加等待效果
            $(ths).children(':eq(0)').addClass('hide');
            $(ths).addClass('not-allow').children(':eq(1)').removeClass('hide');
            var post_dict = {};
//            获取每一个input中的值
            $('.form-data input').each(function(){
                post_dict[$(this).attr("name")] = $(this).val();
            });
//            console.log(post_dict);
//            ajax提交请求
            $.ajax({
                url: '/admin/login',
                type: 'POST',
                data: post_dict,
                dataType: 'json',
                success: function(arg){
//                    判断返回值，做出响应动作
                    if(arg.status === 'true'){
                        window.location.href = '/admin/index';
                    }else{
                        $('#error-msg').removeClass('hide').text(arg.message);
                    }
                }
            });
//            扫尾
            $(ths).removeClass('not-allow').children(':eq(1)').addClass('hide');
            $(ths).children(':eq(0)').removeClass('hide');
        }
    </script>
</body>
</html>